<template>
  <div>
    <div v-if="showBindPhoneModal" class="bindp">
      <div class="c-pf c-pz10000 c-p-t0 c-p-l0 c-p-b0 c-p-r0 c-translucent-balck60"></div>
      <div style="z-index: 40001 !important;" class="c-ww540 m-auto c-textAlign-c c-pf c-table c-p-t0 c-p-l0 c-p-b0 c-p-r0" :class="loginStep >= 2 ? '' : 'c-pb40'">
        <div v-if="loginStep == 2" class="c-ww540 c-br20 c-bg-white c-pt40 c-pb32 c-ph40 c-fs22 c-lh36 c-textAlign-l c-p">
          <div class="tip-area c-flex-row c-flex-center c-fs24 c-fw600">
            <img class="c-ww28 c-hh26 c-mr10" src="@/assets/bind-phone-notice.png" alt="">
            <span>重要提醒</span>
          </div>
          <div>1.请选择一个作为主账号，<span class="c-fc-FF300B">另一账号将会被注销</span></div>
          <div>2.注销账号的余额、优惠券、课程等资产将迁移到主账号，其他数据将会丢失</div>
        </div>
        <div class="c-p c-bg-white c-br20" :class="[loginStep == 2 && 'c-mt30', loginStep == 1 && 'c-pb40']">
          <div class="c-fs32 c-pt40 c-pb20 c-fw-b c-textAlign-c">{{isChooseAccount ? '请选择您要绑定的账号' : '绑定手机号'}}</div>
          <template v-if="!isChooseAccount">
            <template v-if="loginStep == 1">
              <section class="c-pl20 c-pr20">
                <div ref="content" class="content c-pr20 c-pl20" :class="isFillUserInfo == 1 ? 'c-pb20' : ''">
                  <div ref="mobile" class="c-bd-b1 c-pt20 c-pb28 c-pl10 c-lh24 c-p" :class="errorTip == 'mobile' ? 'errorTip' : ''">
                    <input type="tel" @input="checkInput('mobile')" @focus='inputFocus' @blur='inputBlur();blurMobile();' v-model.trim="mobile" name="" placeholder="请输入手机号" maxlength="13"
                      class="c-fs24 c-lh c-bd0 c-w100 c-bg-transparent" />
                    <div class="errorTipText">请输入手机号</div>
                  </div>
                  <div ref="imgCode" class="c-bd-b1 c-pt30 c-pb22 c-pl10 c-flex-row c-aligni-center c-justify-sb c-p" :class="errorTip == 'imgCode' ? 'errorTip' : ''">
                    <input type="tel" @input="checkInput('imgCode')" @focus='inputFocus' @blur='inputBlur' v-model="imgCode" name="" placeholder="请输入图形验证码"
                      class="c-fs24 c-lh c-bd0 c-w0 c-flex-grow1 c-bg-transparent" />
                    <div class="c-flex-row c-ww144 c-hh48 c-ml20 c-justify-end">
                      <img :src="$addXossFilter(codeImgInfo.img)" @click="getImgCode" class="c-w100 c-h" alt="">
                    </div>
                    <div class="errorTipText">请输入图形验证码</div>
                  </div>
                  <div ref="code" class="c-bd-b1 c-pt30 c-pb22 c-pl10 c-lh24 c-flex-row c-aligni-center c-justify-sb c-p" :class="errorTip == 'code' ? 'errorTip' : ''">
                    <input @input="checkInput('code')" @focus='inputFocus' @blur='inputBlur' v-model="code" name="" placeholder="请输入验证码" class="c-fs24 c-lh c-bd0 c-w0 c-flex-grow1 c-bg-transparent" />
                    <div class="theme-bd1 c-fs22 theme-fc c-lh22 c-block c-textAlign-r c-ph16 c-pv12 c-br40 c-flex-row c-flex-center"
                      :class="mobile && mobile.length > 0 && imgCode && imgCode.length > 0 ? '' : 'c-opacity50'" @click="getYzcode">{{yzText}}</div>
                    <div class="errorTipText">请输入手机验证码</div>
                  </div>
                  <div ref="address" class="c-bd-b1 c-pb22 c-pl10 c-flex-row c-aligni-center c-justify-sb c-p c-pt30" :class="errorTip == 'address' ? 'errorTip' : ''" v-if="isNeedFillArea">
                    <div v-if="isWeiXin && isOpenGetLocation" @click="getLocation" class="c-w90 c-h c-flex-row c-aligni-center">
                      <div v-if="!(addrValue && addrValue.length)" class="c-fs24 c-lh34 c-fc-sgray">请点击定位</div>
                      <div v-else class="c-fs24 c-lh34 c-fc-xblack">{{getAddressName(addrValue)}}</div>
                    </div>
                    <x-address v-if="!isWeiXin || !isOpenGetLocation" :themeColor="$getThemeColor()" v-model="addrValue" @on-hide="saveAddress" @on-show="showAddr()" title="" :list="addressData" placeholder="请选择所在地(必填)"
                      value-text-align="left" :show.sync="showAddress" class="c-fs24 c-w90 c-lh34 address-cell"></x-address>
                    <span class="iconfont c-fc-sgray" @click="getLocation">{{isWeiXin ? '&#xe905;' : '&#xe635;'}}</span>
                    <!-- <div class="errorTipText">{{isWeiXin ? (!isOpenGetLocation ? '请先把手机"设置-微信定位"开启' : '未定位') : '未填写'}}</div> -->
                  </div>
                  <block v-if="isFillUserInfo == 1">
                    <div :ref="'userInfo' + index" :id="'userInfo' + index" v-for="(item,index) in customUserInfo" :key="index" class="c-bd-b1 c-pb22 c-pl10 c-p" :class="errorTip == ('userInfo' + index) ? 'errorTip' : ''">
                      <input type="text" @input="checkInput('userInfo' + index)" v-model="item.content" name="" :placeholder="'请输入'+item.title" id="" value=""
                        class="c-pt30 c-fs24 c-lh34 c-w100 c-bd0 c-bg-transparent" />
                      <div class="errorTipText">{{errorType == 1 ? '未填写' : '不能超过20个字符'}}</div>
                      <div v-if="item.require" class="c-fs32 c-fc-xmlred c-pa c-p-lm10 c-p-t36 c-lh">*</div>
                    </div>
                  </block>
                </div>
              </section>
              <section class="c-ph40 c-pt38" :class="isFillUserInfo == 1 ? 'boxShadow' : ''">
                <!-- 小程序环境无论设置是否必填，都可以忽略，否则管理端开启强制绑定手机号，小程序会被举报违规收集手机号 -->
                <div @click="submit" v-if="isNeed && !$isWxApp()" class="c-lh c-fs24 c-hh60 c-flex-row c-flex-center c-br40 theme-bg c-fc-white">确定</div>
                <div v-else class="c-flex-row c-aligni-center c-justify-sb">
                  <!-- 非门店 || 是门店未授权 -->
                  <div v-if="!$isStore() || ($isStore() && storeConfig.isStoreVisit)" @click="ignore" class="c-bd1-F1F1F5 c-fs24 c-fc-xblack c-hh60 c-flex-row c-flex-center c-br40 c-w0 c-flex-grow1 c-lh">忽略</div>
                  <div class="c-ww40 c-hh20"></div>
                  <div @click="submit" class="c-fs24 c-hh60 c-flex-row c-flex-center c-br40 c-w0 c-flex-grow1 c-lh theme-bg c-fc-white">确定</div>
                </div>
                <section ref="agreement1" @click="changeCheckAgreement" v-if="isShowAgree && protocolInfo" class="c-lh38 c-fs18 theme-fc c-mt40 c-p c-flex-row" :class="errorTip == 'agreement1' ? 'errorAgreeTip' : ''">
                  <i v-show="!isCheckAgreement" class="iconfont c-fs22 c-fc-gray c-pr12 c-lh38">&#xe872;</i>
                  <i v-show="isCheckAgreement" class="iconfont c-fs22 theme-fc c-pr12 c-lh38">&#xe871;</i>
                  <div class="c-textAlign-l">
                    <span class="c-fc-gray">已阅读并同意</span>
                    <template v-if="isAndroidApp || isiOSApp">
                      <span @click.stop="linkToProtocol(protocolInfo.useProtocolUrl)">《用户服务协议》</span>
                      <span @click.stop="linkToProtocol(protocolInfo.privacyProtocolUrl)">《隐私政策》</span>
                    </template>
                    <template v-else>
                      <span @click.stop="clickProtocol(item)" v-for="(item, index) in protocolInfo" :key="index">《{{item.name}}》</span>
                    </template>
                  </div>
                  <div class="errorAgreeTipText">
                    <div class="c-p c-pz10 c-hh30 c-ww160 c-flex-row c-justify-center c-fc-white">
                      <img class="c-h c-w100 c-pa c-p-l0 c-p-t0 c-pz-1" src="@/assets/bind-phone-tip.png" alt="">
                      <div class="">请先同意相关协议</div>
                    </div>
                  </div>
                </section>
                <div ref="agreement2" class="c-flex-row c-flexw-wrap c-aligni-center c-justify-start c-lh30 c-fs18 c-fc-gray c-mt40 c-p" :class="errorTip == 'agreement2' ? 'errorAgreeTip' : ''"
                  v-if="isShowAgree && isiOS && companyId == 'ldwk'">
                  <i class="icon iconfont c-fs20 c-pr12" v-if="isAgree == 0" @click="changeAgree(1)">&#xe692;</i>
                  <i class="icon iconfont c-fs20 theme-fc c-pr12" v-if="isAgree == 1" @click="changeAgree(0)">&#xe82e;</i>
                  已阅读并同意 <span class="theme-fc" @click="goInfo(1)">用户协议</span>
                  <div class="errorAgreeTipText">
                    <div class="c-p c-pz10 c-hh30 c-ww180 c-flex-row c-justify-center c-fc-white">
                      <img class="c-h c-w100 c-pa c-p-l0 c-p-t0 c-pz-1" src="@/assets/bind-phone-tip.png" alt="">
                      <div class="">登陆注册同意用户协议</div>
                    </div>
                  </div>
                </div>
              </section>
            </template>
            <div v-if="loginStep >= 2" class="c-maxh58vh c-content-auto c-br-bl20 c-br-br20 c-p c-mt10" :class="loginStep == 2 && userCount <= 2 ? 'c-pb144' : 'c-pb140 c-mb20'">
              <div class="c-ph40 c-textAlign-l">
                <div v-if="currentUserIndex > -1 && userInfo[currentUserIndex]" @click="selectUser(currentUserIndex)" class="c-bg-white c-br20 c-flex-column c-justify-sb c-aligni-center c-p" :class="loginStep == 2 && selectIndex == currentUserIndex ? 'theme-bd4' : 'c-bd4-EEEEEE'">
                  <div class="current-user theme-bg c-flex-row c-flex-center c-fc-white">当前账号</div>
                  <div v-if="loginStep == 2" class="check-user c-flex-row c-flex-center" :class="selectIndex == currentUserIndex ? 'theme-bg' : 'c-bg-eee'">
                    <span class="iconfont c-fs16 c-fc-white">&#xe8f8;</span>
                  </div>
                  <div class="c-w100 c-flex-row c-justify-sb c-pl30 c-pr10 c-pv20">
                    <div class="c-p c-ww72 c-hh72 c-brp50 c-flex-shrink0">
                      <div class="c-pa c-p-b0 c-p-r0 c-flex-row c-aligni-center c-pz10">
                        <div style="z-index: -1" v-if="userInfo[currentUserIndex] && checkIncludeWechat(userInfo[currentUserIndex].fromChannel)"
                          :class="checkIncludeMobile(userInfo[currentUserIndex].fromChannel) ? 'c-mrm16' : ''" class="c-flex-shrink0 c-flex-row c-flex-center">
                          <img src="@/assets/i/wap/common/wechat-icon.png" alt="" class="c-ww30 c-hh30 c-brp50">
                        </div>
                        <div v-if="userInfo[currentUserIndex] && checkIncludeMobile(userInfo[currentUserIndex].fromChannel)" class="c-flex-shrink0 c-flex-row c-flex-center">
                          <img src="@/assets/i/wap/common/mobile-icon.png" alt="" class="c-ww30 c-hh30 c-brp50">
                        </div>
                      </div>
                      <img class="c-ww72 c-hh72 c-brp50" :src="$addXossFilter(userInfo[currentUserIndex].headimgurl, require('@/assets/defult_head.png'))" alt="">
                    </div>
                    <div class="c-flex-grow1 c-pl20 c-w0 c-fw400">
                      <div class="c-fs24 c-fw600 c-fc-xblack c-text-ellipsis1 c-flex-row c-aligni-center">
                        <div class="c-text-ellipsis1">{{userInfo[currentUserIndex].nickname}}</div>
                        <identity-com class="c-pl10" :isShowOrdinary="false" :vipType="userInfo[currentUserIndex].vipType"></identity-com>
                      </div>
                      <div class="c-fs20 c-fc-gray c-textAlign-l">
                        <div class="c-mt10 c-flex-row c-aligni-center">
                          <div>已购课程：{{userInfo[currentUserIndex].courseNum}}</div>
                          <div class="c-mh10 c-bd-l1-gray c-hh20"></div>
                          <div>优惠券：{{userInfo[currentUserIndex].couponNum}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="c-w100 c-bg-fa c-pv12 c-br-bl20 c-br-br20 c-ph30 c-fs20 c-fc-gray">
                    <div class="c-w100 c-flex-row">
                      <div class="c-w45 c-flex-row">
                        <span class="c-flex-shrink0">余额：</span>
                        <span class="c-fc-xblack">{{Number(userInfo[currentUserIndex].balance || 0).toFixed(2)}}</span>
                      </div>
                      <div class="c-w55 c-flex-row">
                        <span class="c-flex-shrink0">{{ customPointName }}：</span>
                        <span class="c-fc-xblack">{{userInfo[currentUserIndex].points}}</span>
                      </div>
                    </div>
                    <div class="c-w100 c-flex-row c-mt10">
                      <div class="c-w45 c-flex-row">
                        <span class="c-flex-shrink0">虚拟币：</span>
                        <span class="c-fc-xblack">{{userInfo[currentUserIndex].coinAmount}}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-for="(item, index) in userInfo" v-if="index != currentUserIndex" :key="index" @click="selectUser(index)" class="c-p c-mt20 c-bg-white c-br20 c-flex-column c-justify-sb c-aligni-center" :class="loginStep == 2 && selectIndex == index ? 'theme-bd4' : 'c-bd4-EEEEEE'">
                  <div class="conflict-user c-flex-row c-flex-center c-fc-white">冲突账号{{loginStep == 3 ? '，即将销毁' : ''}}</div>
                  <div v-if="loginStep == 2" class="check-user c-flex-row c-flex-center" :class="selectIndex == index ? 'theme-bg' : 'c-bg-eee'">
                    <span class="iconfont c-fs16 c-fc-white">&#xe8f8;</span>
                  </div>
                  <div class="c-w100 c-flex-grow1 c-flex-row c-justify-sb c-pl30 c-pr10 c-pv20">
                    <div class="c-p c-ww72 c-hh72 c-brp50 c-flex-shrink0">
                      <div class="c-pa c-p-b0 c-p-r0 c-flex-row c-aligni-center c-pz10">
                        <div style="z-index: -1" v-if="checkIncludeWechat(item.fromChannel)" :class="checkIncludeMobile(item.fromChannel) ? 'c-mrm16' : ''"
                          class="c-flex-shrink0 c-flex-row c-flex-center">
                          <img src="@/assets/i/wap/common/wechat-icon.png" alt="" class="c-ww30 c-hh30 c-brp50">
                        </div>
                        <div v-if="checkIncludeMobile(item.fromChannel)" class="c-flex-shrink0 c-flex-row c-flex-center">
                          <img src="@/assets/i/wap/common/mobile-icon.png" alt="" class="c-ww30 c-hh30 c-brp50">
                        </div>
                      </div>
                      <img class="c-ww72 c-hh72 c-brp50" :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" alt="">
                    </div>
                    <div class="c-flex-grow1 c-pl20 c-w0 c-fw400">
                      <div class="c-fs24 c-fw600 c-fc-xblack c-text-ellipsis1 c-flex-row c-aligni-center">
                        <div class="c-text-ellipsis1">{{item.nickname}}</div>
                        <identity-com :isShowOrdinary="false" :vipType="item.vipType"></identity-com>
                      </div>
                      <div class="c-fs20 c-fc-gray c-textAlign-l">
                        <div class="c-mt10 c-flex-row c-aligni-center">
                          <div>已购课程：{{item.courseNum}}</div>
                          <div class="c-mh10 c-bd-l1-gray c-hh20"></div>
                          <div>优惠券：{{item.couponNum}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="c-w100 c-bg-fa c-pv12 c-br-bl20 c-br-br20 c-ph30 c-fs20 c-fc-gray">
                    <div class="c-w100 c-flex-row">
                      <div class="c-w45 c-flex-row">
                        <span class="c-flex-shrink0">余额：</span>
                        <span class="c-fc-xblack">{{Number(item.balance || 0).toFixed(2)}}</span>
                      </div>
                      <div class="c-w55 c-flex-row">
                        <span class="c-flex-shrink0">{{ customPointName }}：</span>
                        <span class="c-fc-xblack">{{item.points}}</span>
                      </div>
                    </div>
                    <div class="c-w100 c-flex-row c-mt10">
                      <div class="c-w45 c-flex-row">
                        <span class="c-flex-shrink0">虚拟币：</span>
                        <span class="c-fc-xblack">{{item.coinAmount}}</span>
                      </div>
                      <div class="c-w55 c-flex-row">
                        <span class="c-flex-shrink0">手机号：</span>
                        <span class="c-fc-xblack">{{item.mobile}}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="loginStep == 3" class="c-bg-fa c-ph30 c-pv20 c-mt20 c-br20 c-fs20">
                  <div class="c-fc-xblack c-lh28">
                    <!-- 目前只会出现最多2个账号的情况 -->
                    将<span class="c-fw600" v-for="(nItem, nIndex) in userInfo" v-if="currentUserIndex != nIndex"
                      :key="nIndex">{{nItem.nickname}}{{userInfo.length > 2 && (nIndex + 1) < userInfo.length ? '、' : ''}}</span>以下数据迁移到<span
                      class="c-fw600">{{userInfo[currentUserIndex].nickname}}</span>
                    <span class="c-fc-gray">余额、已购课程、优惠券、虚拟币、{{ customPointName }}。</span>
                  </div>
                  <div class="c-fc-xblack c-mt20 c-lh28">
                    <span class="c-fw600" v-for="(nItem, nIndex) in userInfo" v-if="currentUserIndex != nIndex"
                      :key="nIndex">{{nItem.nickname}}{{userInfo.length > 2 && (nIndex + 1) < userInfo.length ? '、' : ''}}</span>
                    <span>的其他数据将永远丢失无法找回，包含但不限于：</span>
                    <span class="c-fc-gray">课程学习进度、身份、客户关系、收藏记录等</span>
                  </div>
                </div>
              </div>
              <div class="c-br-bl20 c-br-br20 c-pf c-p-b0 c-bg-white c-w100 c-pv40 c-ph40 c-flex-row c-justify-sb c-aligni-center c-pz100 c-maxw640" :class="loginStep == 2 && userCount <= 2 ? '' : 'c-box-shadowEdu'">
                <div class="c-flex-row c-flex-center c-fs28 c-fc-xblack c-bd1-mgray c-ww210 c-hh60 c-br40" @click="exitMerge">退出合并</div>
                <div class="c-flex-row c-flex-center c-fs28 c-fc-white theme-bg c-ww210 c-hh60 c-br40 c-ml20" @click="goStep()">{{loginStep == 3 ? '确认合并' : '下一步'}}</div>
              </div>
            </div>
          </template>
          <div v-else class="c-ph24 c-pt10">
            <div class='c-pb20 c-flex-column c-flex-center' v-for='(item,index) in userAccountList' :key="index">
              <div @click='clickSelectAccount(index)' class='c-p c-ph24 c-pv16 c-ww460 c-flex-row c-aligni-center c-br20' :class="selectIndex == index ? 'theme-bd4' : 'c-bd4-EEEEEE'">
                <img class='c-ww72 c-hh72 c-brp50' :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" />
                <div class='c-pl16 c-flex-column c-flex-grow1 c-w0 c-aligni-start'>
                  <div class='c-fs24 c-text-ellipsis1'>{{item.nickname || '未知'}}</div>
                  <div class='c-fs20 c-fc-gray c-pt10'>{{vipTypeMap[item.vipType]}}</div>
                </div>
                <div class="check-user c-flex-row c-flex-center" :class="selectIndex == index ? 'theme-bg' : 'c-bg-eee'">
                  <span class="iconfont c-fs16 c-fc-white">&#xe8f8;</span>
                </div>
              </div>
            </div>
            <div class="c-mt10 c-flex-row c-flex-center">
              <div @click='clickComfirm' class='c-ww460 c-hh60 c-flex-row c-flex-center c-br40 c-fc-white c-fs28 theme-bg'>确定</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <transition name="fade">
      <div ref="confirmModal" v-if="isShowCombine" @click.self="clickCancel" class="confirm-modal masker">
        <article class="confirm-content">
          <div class="confirm-title c-textAlign-c c-mb24">提示</div>
          <div class="c-maxh280 c-ph40 c-contexty-scroll c-fs24">
            确定要将{{nicknameStr}}的数据迁移到【{{this.userInfo[this.currentUserIndex].nickname}}】吗?
          </div>
          <footer class="confirm-footer">
            <div @click="clickCancel" class="btn-cancel">取消</div>
            <div @click="clickConfirm" class="btn-confirm theme-fc">确定</div>
          </footer>
        </article>
      </div>
    </transition>
  </div>
</template>

<script>
import { XAddress } from 'ckjrweb-mp-ui/src/components/index';
import { loadBMap } from "@/utils/loadBMap.js"
import { utilJs, wxUtilJs } from "@/utils/common.js";
import identityCom from "@/components/templates/common/identityCom.vue";
let inputScrollTop = 0;
let isClicking = false;
export default {
  name: "bindPhoneModal",
  components: {
    XAddress,
    identityCom
  },
  props: {
    showBindPhoneModal: {
      type: Boolean,
      default: false
    },
    isNeed: {
      type: Boolean,
      default: false
    },
    isRetrieve: { // 是否要走账号平移流程
      type: Boolean,
      default: false
    },
    locateType: {
      type: Number,
      default: 0
    },
    storeConfig:{
      type:Object,
      default: () => {}
    }
  },
  beforeCreate() { },
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
      showAddress: false,
      addrValue: [],
      addressData: '', // addressData,
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      companyName: window.localStorage.getItem("companyName"),
      companyId: window.localStorage.getItem("companyId"),
      num: 60,
      interval: null,
      yzText: "获取验证码",
      isYz: true,
      mobile: null,
      code: null, // 验证码
      isClick: false,
      isSubmit: true, //防止多次提交
      isAgree: 1, //ios app同意条款
      isiOS: false,
      customUserInfo: [],
      isFillUserInfo: 0,
      enableAreaAgent: 0,
      enableXhAreaAgent: 0,
      codeImgInfo: '', //图形验证码信息
      imgCode: '', //填入的图形验证码
      integrateCount: 0, //绑定手机获取积分
      showIntegrate: false,
      ckFrom: global.ckFrom,
      isCheckAgreement: false,
      refereeId: '', // 绑定关系
      protocolInfo: null,
      isAndroidAp: false,
      isiOSApp: false,
      enableWriteAddress: 0, // 绑定手机时是否填写所在地
      // 平移
      isChooseAccount: false, // 是否是平移后选择账户
      userAccountList: [],
      vipTypeMap: {},
      //  账号合并
      loginStep: 2, // 登录步骤 1 登录页面 2 选择合并账号
      userCount: 0, // 当前登录手机号绑定的平台账号数量
      userInfo: [], // 当前手机号的所有账号信息
      constUserInfo: [], // 原始数据
      constUserIndex: -1, // 最开始选中的当前账号
      currentUserIndex: 0, // 当前账号信息在userInfo中的索引（比如抖音打开就是对应抖音的账号信息索引）
      fromChannel: -1, // 当前浏览器 -1=未知; 1=mp 公众号; 2=wxapp 小程序; 3=android; 4=ios; 5=web/pc; 13 其他手机浏览器; 14=抖音
      selectIndex: 0, // 选中的用户
      destroyIndex: [], // 即将销毁的用户index
      isClickCode: false, // 是否已经点击获取验证码，现在获取绑定该手机号的账户信息都需要走获取验证码这步，所以需要保证用户点击过验证码
      isAllWechat: false, // 是否绑定账号都是微信
      isShowCombine: false,
      nicknameStr: '',
      errorTip: '',
      isWeiXin: true,
      isShowAgree: true,
      isOpenGetLocation: true, // 是否开启定位
      checkInterval: null, // 合并轮询定时器
      checkTimes: 0, // 轮询次数
      errorType: 1 //1 未填写 2字数超过
    };
  },

  computed: {
    isNeedFillArea() { // 是否需要必填用户地区（旧版和新版区域代理都需要）, personalTailorByGldg私人订制,enableShareholderAreaAgent股东区域代理必填地区 || (9.29新增)绑定手机时填写所在地 0否 1是
      // return (this.enableAreaAgent == 1 || (this.companyAuth && this.companyAuth.enableNewAreaAgent == 1) || this.enableXhAreaAgent == 1 || this.$route.query.personalTailorByGldg == 1 || (this.companyAuth && this.companyAuth.enableShareholderAreaAgent == 1)) || (this.isFillUserInfo == 1 && this.enableWriteAddress == 1)
      return this.locateType == 1 || this.locateType == 2;
    },
  },
  watch: {
    showBindPhoneModal: {
      handler(val, oldVal) {
        val && this.initData();
      },
      immediate: true,
    },
    mobile() {
      if (this.mobile && isNaN(this.mobile)) {
        this.mobile = "";
      } else if (this.mobile) {
        this.mobile.length > 11 && this.mobile.substr(0, 11);
      }
    }
  },
  mounted() {
    this.vipTypeMap = utilJs.getCustNameMap();
    let customNameInfo = localStorage.getItem("customName") ? JSON.parse(localStorage.getItem("customName")) : {}
    this.vipTypeMap = {
      1: '普通用户',
      2: 'VIP',
      3: customNameInfo.agentName,
      4: 'SVIP',
      5: customNameInfo.partnerName,
      6: customNameInfo.branchName,
      7: customNameInfo.cooName,
      8: customNameInfo.agencyName
    }
    // this.initData();
  },
  methods: {
    getAddressName(addrValue) {
      let provinceStr = '', cityStr = '', areaStr = '';
      this.addressData && this.addressData.forEach(item => {
        if (item.value == addrValue[0]) {
          provinceStr = item.name
        }
        if (item.value == addrValue[1]) {
          cityStr = item.name
        }
        if (item.value == addrValue[2]) {
          areaStr = item.name
        }
      })
      return provinceStr + ' ' + cityStr + ' ' + areaStr
    },
    getAddId(list, id) {
      if (list && list.length == 1) {
        return list[0].value
      }
      let currentId = ''
      list.forEach((item) => {
        if (item.parent == id) {
          currentId = item.value
        }
      })
      return currentId
    },
    getAddressId(addComp) {
      let provinceId = '', cityIds = [], cityId = '', areaIds = [], areaId = ''
      this.addressData && this.addressData.forEach(item => {
        item.name = ['北京', '天津', '上海', '重庆'].includes(item.name) ? (item.name + '市') : item.name
        if (item.name == addComp.province && item.level == 1) {
          provinceId = item.value
        }
        if (item.name == addComp.city && item.level == 2) { // 防止市名重复
          cityIds.push(item)
        }
        if (item.name == addComp.district && item.level == 3) { // 防止区名重复
          areaIds.push(item)
        }
      })
      cityId = this.getAddId(cityIds, provinceId)
      areaId = this.getAddId(areaIds, cityId)
      this.addrValue = ['' + provinceId, '' + cityId, '' + areaId]
      // 如果定位获取到的数据不完整，就自动弹出选择框
      if (!(this.addrValue && this.addrValue.length == 3 && provinceId && cityId && areaId)) {
        this.addrValue = []
        this.isOpenGetLocation = false
        this.$nextTick(() => {
          this.showAddress = true
        })
      }
    },
    getLocation() {
      if (!this.isWeiXin) {
        return
      }
      let that = this;
      wxUtilJs.getLocation().then((res) => {
        that.getBdAddress(res.longitude, res.latitude);
        that.isOpenGetLocation = true;
        if (that.errorTip == 'address') {
          that.errorTip = ''
        }
      }, (failRes) => {
        that.isOpenGetLocation = false
        that.$nextTick(() => {
          that.showAddress = true
        })
        that.errorTip = 'address'
        that.$nextTick(() => {
          that.showAddress = true
        })
        console.log('获取经纬度失败');
      });
    },
    getBdAddress(longitude, latitude) {
      /* eslint-disable */
      let that = this;
      that.$loading.hide();
      that.$loading.show({
        text: "定位中"
      });
      loadBMap().then(BMap => {
        let point = new BMap.Point(longitude, latitude)
        let gc = new BMap.Geocoder()
        gc.getLocation(point, function(rs){
          that.$loading.hide();
          const addComp = rs.addressComponents
          // 可以通过addComp对象获取到省、市、县、区、街道多少号等信息
          that.getAddressId(addComp)
        })
      })
    },
    //取消
    clickCancel() {
      this.isShowCombine = false
    },
    //练习确定
    clickConfirm() {
      this.isShowCombine = false
      this.submit()
    },
    // 平移
    //点击选择一个用户
    clickSelectAccount(index) {
      this.selectIndex = index;
    },
    //点击确定按钮
    clickComfirm() {
      if (isClicking) {
        return;
      }
      isClicking = true;
      let data = {
        mobile: this.userAccountList[this.selectIndex].mobile,
        selectedUserId: this.userAccountList[this.selectIndex].userId,
        code: this.code,
        companyId: localStorage.getItem("companyId"),
      };
      utilJs.postMethod(`${global.apiurl}members/confirmBindMobile`, data, res => {
        this.$showCjToast({
          text: "找回成功",
          type: "success",
        }).then(()=>{
          localStorage.clear();
          if (utilJs.isIOSApp()) {
            window.webkit.messageHandlers.iosWechatLoginOut.postMessage('loginOut');
            return;
          }
          if (utilJs.isAndroidApp()) {
            utilJs.androidAppExit();
            return;
          }
          window.location.reload(true);
        })
        isClicking = false;
      }, failRes => {
        isClicking = false;
      });
    },
    // 账号合并
    goStep() {
      if (this.loginStep == 2) {
        this.destroyIndex = [];
        this.currentUserIndex = this.selectIndex; // 最后确认是否合并，当前账号更改为选中账号，在提示用户一遍
        for (let i = 0; i < this.userInfo.length; i++) {
          // 有出现过主账号id和待废弃的id一致，合并后直接把账号删除的情况，所以需要多加一个主账号id和待废弃id不一致的判断
          if (i != this.currentUserIndex && this.userInfo[this.currentUserIndex].userId != this.userInfo[i].userId) {
            let currentData = JSON.parse(JSON.stringify(this.userInfo[this.currentUserIndex]));
            this.userInfo[this.currentUserIndex] = {
              userId: currentData.userId,
              fromChannel: [...currentData.fromChannel, ...this.userInfo[i].fromChannel],
              headimgurl: currentData.headimgurl,
              mobile: currentData.mobile,
              nickname: currentData.nickname,
              vipType: currentData.vipType,
              vipName: currentData.vipName,
              balance: Number(currentData.balance) + Number(this.userInfo[i].balance),
              couponNum: Number(currentData.couponNum) + Number(this.userInfo[i].couponNum),
              courseNum: Number(currentData.courseNum) + Number(this.userInfo[i].courseNum),
              points: Number(currentData.points) + Number(this.userInfo[i].points),
              coinAmount: Number(currentData.coinAmount) + Number(this.userInfo[i].coinAmount)
            };
            this.userInfo[i] = {
              userId: this.userInfo[i].userId,
              fromChannel: [],
              headimgurl: this.userInfo[i].headimgurl,
              mobile: this.userInfo[i].mobile || '',
              nickname: this.userInfo[i].nickname,
              vipType: 0,
              vipName: '',
              balance: 0,
              couponNum: 0,
              courseNum: 0,
              points: 0,
              coinAmount: 0
            }
            this.destroyIndex.push(i);
          }
        }
      }
      if (this.loginStep < 3) {
        this.loginStep++;
      } else {
        this.nicknameStr = '';
        this.destroyIndex.forEach((item, index) => {
          this.nicknameStr = this.nicknameStr + `【${this.userInfo[item].nickname}】`;
        })
        this.isShowCombine = true;
      }
    },
    exitMerge() {
      this.initData()
    },
    checkMergeInfo (data) {
      this.checkTimes = 0
      this.checkInterval = setInterval(() => {
        this.checkTimes += 1
        let postUrl = `${global.apiurl}accountConnect/checkMergeInfo`;
        utilJs.postMethod(postUrl, data, (res) => {
          if (res && res.res) {
            clearInterval(this.checkInterval);
            this.checkInterval = null;
            this.checkTimes = 0
            this.$loading.hide();
            this.$showCjToast({
              text: "合并成功",
              type: "success",
            });
            this.$emit('finishBindMobile');
            this.$store.commit("updateShowBindPhoneModal", {
              showBindPhoneModal: false
            });
          } else if (this.checkTimes > 10) { // 20秒内没有合并成功就要退出了
            clearInterval(this.checkInterval);
            this.checkInterval = null;
            this.checkTimes = 0
            this.$loading.hide();
            this.$showCjToast({
              text: "因用户数据量大，账号还在合并中，请耐心等待...",
              type: "success",
            });
            this.$emit('finishBindMobile');
            this.$store.commit("updateShowBindPhoneModal", {
              showBindPhoneModal: false
            });
          }
        }, () => {
          clearInterval(this.checkInterval);
          this.checkInterval = null;
          this.checkTimes = 0
          this.$loading.hide();
        });
      }, 2000)
    },
    // 手机号登录
    mobileLogin() {
      let companyId = utilJs.getCompanyIdByHerf();
      let url = "accountConnect/mobileLogin";
      let data = {
        'mobile': this.mobile,
        'verifyCode': this.code,
        'fromApp': this.fromChannel == 14 ? 'dy' : 'qt',
        'companyId': companyId
      }
      if (!!this.refereeId) { // 关系绑定
        data.refereeId = this.refereeId;
      }
      if (this.userCount > 1) { // 账号合并
        data.userId = this.userInfo[this.currentUserIndex].userId;
        let cancelUserId = []
        this.destroyIndex.forEach(item => {
          cancelUserId.push(this.userInfo[item].userId)
        });
        data.cancelUserId = cancelUserId;
        url = "accountConnect/accountCombine"
      }
      utilJs.postMethod(global.apiurl + url, data, res => {
        if (res.t != "" && res.u != "" && res.c != null) {
          // accountCombine只是跑脚本，返回值不代表合并完成，需要加一步检查合并是否完成，合并未完成，用户进行支付等操作，会导致数据丢失
          this.checkMergeInfo(data)
        } else {
          this.$loading.hide();
        }
      }, failRes => {
        this.initData()
        this.$loading.hide();
      })
    },
    setSingle(arr) { // 去重
      if (!arr || !arr.length) {
        return []
      }
      let map = new Map();
      for (let item of arr) {
        if (!map.has(item.userId)) {
          map.set(item.userId, item);
        };
      };
      return [...map.values()];
    },
    selectUser(index) {
      if (this.loginStep != 2) {
        return
      }
      this.selectIndex = index
    },
    checkSendCode() {
      let companyId = utilJs.getCompanyIdByHerf();
      let data = {
        'mobile': this.mobile,
        'verifyCode': this.code,
        'fromApp': this.fromChannel == 14 ? 'dy' : 'qt',
        'companyId': companyId
      }
      utilJs.postMethod(global.apiurl + "accountConnect/checkSendCode", data, res => {
        this.goStep()
      })
    },
    checkIncludeWechat(fromChannel) { // fromChannel 是否包含手机浏览器
      if (fromChannel && (fromChannel.includes('1') || fromChannel.includes('2'))) {
        return true
      } else {
        return false
      }
    },
    checkIncludeMobile(fromChannel) { // fromChannel 是否包含手机浏览器
      if (fromChannel && (fromChannel.includes('13') || fromChannel.includes('14'))) {
        return true
      } else {
        return false
      }
    },

    // 原弹窗绑定手机号流程
    showAddr() {
      if (!!document.querySelectorAll('.vux-popup-mask').length > 0) {
        let divMask = document.getElementsByClassName('vux-popup-mask')[0];
        divMask.style['zIndex'] = 40001
      }
    },
    blurMobile() {
      //输入手机号失去焦点后，进行判断此账号是否要合并账号，如果要合并账号，就跳转到绑定手机号的页面；账号平移也不需要获取手机号下所有的账户信息
      if (this.mobile && !isNaN(this.mobile) && !this.isRetrieve) {
        //获取当前要绑定的手机号所有的账户信息
        utilJs.getMethod(`${global.apiurl}common/getCustomerUserInfo?companyId=${this.companyId}&mobile=${this.mobile}`, res => {
          this.userInfo = [...res.currentUserInfo, ...res.userInfo];
          this.userInfo = this.setSingle(this.userInfo); // 去重，防止接口返回重复数据，接口有做了判断，让前端也加
          this.constUserInfo = JSON.parse(JSON.stringify(this.userInfo))
          this.userCount = this.userInfo.length;
          this.currentUserIndex = 0;
          this.selectIndex = 0;
          this.constUserIndex = 0;
        });
      }
    },
    ignore() {
      this.$emit('ignore');
      this.num = 60;
      clearInterval(this.interval);
      this.yzText = "获取验证码";
      this.isYz = true;
      this.mobile = null;
      this.code = null; // 验证码
    },
    submit: function () {
      if (!this.checkSubmit()) {
        return;
      }
      if (this.loginStep == 1 && this.userCount > 1) { // 绑定该手机的账号数大于1个，要走合并账号流程
        this.checkSendCode()
        return
      }
      if (!this.isSubmit) {
        return;
      }
      this.isSubmit = false;
      this.$loading.show({
        text: this.userCount > 1 ? '账号合并中，请勿关闭页面' : ''
      });
      let memberData = {
        'mobile': this.mobile,
        'code': this.code,
        'customUserInfo': this.isFillUserInfo == 1 ? this.customUserInfo : null,
      }
      let address = {};
      if (this.isNeedFillArea) { // 必填用户所在地
        let provinceId = this.addrValue[0];
        let cityId = this.addrValue[1];
        let areaId = this.addrValue[2];
        address = { 'provinceId': provinceId, 'cityId': cityId, 'areaId': areaId };
        memberData.address = address;
      }
      if (this.isRetrieve) {
        this.retrieveAccount(memberData);
      } else {
        this.bindMobile(memberData);
      }
    },
    bindMobile(postData) {
      let $this = this;
      utilJs.postMethod(`${global.apiurl}members/bindMobile`, postData, function (res) {
        $this.isSubmit = true;
        localStorage.setItem("uMobile", $this.mobile);
        $this.bindGetIntegration();
        if ($this.userCount > 1) { // 若是该手机已有绑定账号，绑定成功后走合并流程
          $this.mobileLogin();
          return;
        }
        $this.$loading.hide();
        $this.$emit('finishBindMobile');
        $this.$showCjToast({
          text: "绑定成功",
          type: "success",
        }).then(()=>{
          $this.$store.commit("updateShowBindPhoneModal", {
            showBindPhoneModal: false
          });
          $this.$store.commit("updateHasModalBindPhone", {
            hasModalBindPhone: true
          });
        });
      }, function () {
        $this.isSubmit = true;
        $this.$loading.hide();
      });
    },
    //平移平台找回账号用
    retrieveAccount(postData) {
      let $this = this;
      utilJs.postMethod(`${global.apiurl}members/newBindMobile`, postData, (res) => {
        $this.$loading.hide();
        this.isSubmit = true;
        localStorage.setItem("uMobile", this.mobile);
        this.bindGetIntegration();
        if (res.account) {
          this.userAccountList = res.account
          this.isChooseAccount = true
        } else {
          this.$showCjToast({
            text: "绑定成功",
            type: "success",
          }).then(()=>{
            $this.$store.commit("updateShowBindPhoneModal", {
              showBindPhoneModal: false
            });
          })
        }
      }, failRes => {
        this.isSubmit = true;
        $this.$loading.hide();
      });
    },
    //绑定手机领取积分
    bindGetIntegration() {
      if (this.companyAuth.enableBindPhonePoint != 1) {
        return;
      }
      let $this = this;
      //积分来源 1. 分享视频，2：观看视频，3：分享音频，4：观看音频，14：分享文章 51：分享知识套餐 52：分享专刊 53：分享直播 54：观看直播 55：绑定手机
      let data = {
        cId: -1,
        extId: -1,
        pointFrom: 55,
        duration: -1
      };
      utilJs.postMethod(`${global.apiurl}common/getPoints`, data, function (res) {
        let integrateCount = res.points;
        if (integrateCount > 0) {
          $this.integrateCount = integrateCount;
          $this.showIntegrate = true;
        }
      });
    },
    closeShareInt() {
      this.showIntegrate = false;
    },
    saveAddress(closeType) {
      // if (closeType && this.addrValue.length == 0) {
      //   this.$showCjToast({
      //     text: "请选择地址",
      //     type: 'warn',
      //     time: 3000
      //   });
      // }
      this.checkInput('address')
    },
    getImgCode() {
      let $this = this;
      if ($this.isLoading == true) {
        return;
      }
      $this.isLoading = true;
      utilJs.getMethod(`${global.apiurl}common/captcha`, res => {
        $this.codeImgInfo = res;
        $this.isLoading = false;
      }, failRes => {
        $this.isLoading = false;
      });
    },
    //IOS微信6.7以上版本会导致输入法收起的时候，键盘没收起，需要手动滚下屏幕
    inputFocus() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        inputScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      }
    },
    inputBlur() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = inputScrollTop - 1 || 0;
        });
      }
    },
    changeCheckAgreement() {
      this.isCheckAgreement = !this.isCheckAgreement;
      this.isAgree = this.isCheckAgreement ? 1 : 0;
      if (this.errorTip == 'agreement1' && this.isCheckAgreement) {
        this.errorTip = ''
      }
    },
    changeAgree(isAgree) {
      this.isAgree = isAgree
      if (this.errorTip == 'agreement2' && this.isAgree) {
        this.errorTip = ''
      }
    },
    clickProtocol(item) {
      this.$routerGo(this, "push", { path: `/homePage/agent/protocolInfo`, query: { protocolId: item.protocolId } });
    },
    goInfo(index) {
      this.$routerGo(this, "push", { path: '/homePage/agent/agentInfo', query: { index: index } });
    },
    getYzMethod: function () {
      this.isYz = false;
      this.num -= 1;
      this.yzText = this.num + "s后获取";
      if (this.num == 0) {
        clearInterval(this.interval);
        this.yzText = "获取验证码";
        this.isYz = true;
        this.num = 60;
        this.isClick = false;
      }
    },
    sendCode() {
      if (this.imgCode == '') {
        this.$showCjToast({
          text: "图片验证码不能为空",
          type: "warn",
        });
        this.isClick = false;
        return;
      }
      this.yzText = "发送中";
      let $this = this;
      utilJs.postMethod(global.apiurl + "members/sendCode", {
        mobile: this.mobile,
        isBindMobile: !this.isRetrieve,
        captcha: this.imgCode,
        captchaKey: this.codeImgInfo.key,
      }, res => {
        if (res.errMsg) {
          $this.yzText = "获取验证码";
          $this.isClick = false;
          $this.$showCjToast({
            text: res.errMsg,
            type: "warn",
          });
        } else {
          $this.interval = setInterval($this.getYzMethod, 1000);
        }
      }, function () {
        clearInterval($this.interval);
        $this.yzText = "获取验证码";
        $this.isYz = true;
        $this.num = 60;
        $this.isClick = false;
      })
    },
    getYzcode: function () {
      if (this.isClick) {
        return;
      }
      this.isClick = true;
      if (!this.mobile) {
        this.$showCjToast({
          text: "手机号不能为空",
          type: "warn",
        });
        this.isClick = false;
        return
      }
      this.isClickCode = true;
      this.sendCode();
    },
    // 检测输入
    checkInput(type) {
      let index = -1
      if (type && type.includes('userInfo')) {
        index = Number(type.split('userInfo')[1])
        console.log(index)
      }
      if (type == "code") {
        this.code = this.code.slice(0, 4)
      }
      if ((index == -1 && this.errorTip == type && !!this[type]) || (index > -1 && this.errorTip == type && !!this.customUserInfo[index].content)) {
        this.errorTip = ''
      }
    },
    //检测提交
    checkSubmit() {
      this.errorTip = '';
      let toastTitle = '';
      let errorIndex = ''
      if (this.isFillUserInfo == 1 && this.customUserInfo) {
        for (var i = 0; i < this.customUserInfo.length; i++) {
          if (this.customUserInfo[i].require == true && this.customUserInfo[i].content == "") {
            toastTitle = this.customUserInfo[i].title;
            errorIndex = 'userInfo' + i
            this.errorType = 1;
            break;
          }
          if ((this.customUserInfo[i].type == 2 || this.customUserInfo[i].type == 3) && this.customUserInfo[i].content.length > 20) {
            toastTitle = this.customUserInfo[i].title;
            errorIndex = 'userInfo' + i
            this.errorType = 2;
            break;
          }
        }
      }
      this.isOpenGetLocation = true
      this.isShowAgree = false
      // 判断手机号、验证码、必填所在地、必填信息是否都填了
      if (!this.errorTip && (!this.mobile || !this.code || (this.isNeedFillArea && this.addrValue.length == 0) || !!toastTitle)) {
        this.errorTip = (!this.mobile ? 'mobile' : !this.imgCode ? 'imgCode' : !this.code ? 'code' : (this.isNeedFillArea && this.addrValue.length == 0) ? 'address' : errorIndex)
      }
      if (!this.errorTip && this.isiOS && localStorage.getItem("companyId") == "ldwk" && this.isAgree == 0) { //ldwk:百家青少年教育app
        this.errorTip = 'agreement2'
      }
      if (!this.errorTip && !this.isCheckAgreement && this.protocolInfo) {
        this.errorTip = 'agreement1'
      }
      this.$nextTick(() => { // 没有勾选协议时，每次点击确认按钮都要有动画
        this.isShowAgree = true
      })
      if (this.errorTip) {
        if (document.getElementById(this.errorTip)) {
          document.getElementById(this.errorTip).scrollIntoView({ block: "center", inline: "center" });
        }
        return false;
      } else {
        return true;
      }
    },
    //获取个人所在地
    getInfo() {
      var $this = this;
      utilJs.getMethod(global.apiurl + 'members', function (res) {
        if (res.provinceId != null && res.cityId != null && res.areaId != null) {
          $this.addrValue = ['' + res.provinceId, '' + res.cityId, '' + res.areaId]
        }
      });
    },
    linkToProtocol(url) {
      if (!url) return
      window.location.href = url;
    },
    getAppUseAndPrivacyProtocols() {
      utilJs.getMethod(`${global.apiurl}app/getAppUseAndPrivacyProtocols`, (res) => {
        this.isCheckAgreement = false;
        this.protocolInfo = res || null;
      });
    },
    getProtocol() {
      utilJs.getMethod(`${global.apiurl}protocols/getProtocolByProdType?prodType=-2`, (res) => {
        this.protocolInfo = res.protocol && res.protocol.length > 0 ? res.protocol : null;
        this.isCheckAgreement = res.relatesType == 1 ? true : false;
      });
    },
    getAreaListForAgent() {
      if (!this.isNeedFillArea) {
        return;
      }
      utilJs.getMethod(`${global.apiurl}common/getAreaListForAgent`, res => {
        this.addressData = res.data;
        this.getInfo();
      }, failRes => { });
    },
    initData() {
      this.isiOS = navigator.userAgent.indexOf("IOSLogin") > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1;
      this.isAndroidApp = utilJs.isAndroidApp();
      this.isiOSApp = utilJs.isIOSAppALL();
      this.isWeiXin = utilJs.isWeiXin();
      this.isClick = false;
      this.isSubmit = true;
      this.isAgree = 1;
      this.codeImgInfo = '';
      this.imgCode = '';
      this.num = 60;
      clearInterval(this.interval);
      this.yzText = "获取验证码";
      this.isYz = true;
      this.mobile = null;
      this.code = null; // 验证码
      this.enableAreaAgent = 0;
      this.enableXhAreaAgent = 0;
      this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
      this.customUserInfo = (localStorage.getItem("customUserInfo") && JSON.parse(localStorage.getItem("customUserInfo"))) || [];
      this.isFillUserInfo = localStorage.getItem("isFillUserInfo") || 0;
      this.enableAreaAgent = localStorage.getItem("enableAreaAgent") || 0;
      this.enableXhAreaAgent = localStorage.getItem("enableXhAreaAgent") || 0;
      this.enableWriteAddress = localStorage.getItem("enableWriteAddress") || 0;
      this.$loading.hide();
      clearInterval(this.checkInterval);
      this.checkInterval = null;
      this.checkTimes = 0
      this.getImgCode();
      this.getAreaListForAgent();
      if (this.isAndroidApp || this.isiOSApp) {
        this.getAppUseAndPrivacyProtocols();
      } else {
        this.getProtocol();
      }
      this.isChooseAccount = false;
      this.userAccountList = [];
      this.loginStep = 1;
      this.userCount = 0;
      this.userInfo = [];
      this.constUserInfo = [];
      this.constUserIndex = -1;
      this.currentUserIndex = 0;
      this.fromChannel = -1;
      this.selectIndex = 0;
      this.destroyIndex = [];
      this.isClickCode = false;
      this.isAllWechat = false;
    }
  },
  activated() {
  },
  deactivated() {
  },
  destroyed() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.vux-cell-box:not(:first-child):before {
  border-top: none !important;
}
.bpm .weui-mask {
  z-index: 10001 !important;
}
.bpm .weui-dialog {
  z-index: 40000 !important;
  max-width: 16rem;
}
.maxh380 {
  max-height: 9.5rem;
}
.bpm .vux-cell-placeholder {
  color: #ccc !important;
}
.m-auto {
  margin: auto;
}
.top-100 {
  top: -2.5rem;
}
.c-pt130 {
  padding-top: 3.25rem;
}
.bindp .content {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 8.5rem;
  max-height: 10.6rem;
}
/* 定义滚动条样式 */
.bindp ::-webkit-scrollbar {
  /*滚动条整体*/
  display: block !important;
  width: 0.3rem !important;
}
.bindp ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 0.25rem;
  background: #f2f2f2 !important;
}
.bindp ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background: transparent !important;
}
.destroy-icon {
  background: rgba(244, 98, 98, 0.1);
  border-radius: 4px;
  color: #f46262;
}

/* 弹窗 */
.masker {
  background-color: rgba(0, 0, 0, 0.5);
}
.confirm-modal {
  position: fixed;
  z-index: 200000;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  opacity: 1;
}
.confirm-content {
  width: 13.5rem;
  background-color: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  padding-top: 1.5rem;
}
.confirm-title {
  color: #333;
  font-weight: bold;
  font-size: 0.7rem;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}
.btn-cancel {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #f6f6f6;
  width: 0;
  height: 1.85rem;
  color: #666;
  font-size: 0.7rem;
}
.btn-confirm {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0;
  height: 1.85rem;
  font-size: 0.7rem;
}
.confirm-footer {
  margin-top: 1rem;
  border-top: 1px solid #f6f6f6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.address-cell >>> .vux-popup-picker-value {
  color: #333 !important;
  font-size: 0.6rem !important;
}
.address-cell >>> .vux-popup-picker-placeholder {
  color: #ccc !important;
  font-size: 0.6rem !important;
}
.boxShadow {
  box-shadow: 0px -10px 20px -12px rgba(0, 0, 0, 0.1);
}
.errorTip {
  border-bottom: 0.05rem solid #ff300c !important;
}
.errorTipText {
  font-weight: 400;
  font-size: 0.45rem;
  color: #ff300c;
  line-height: 0.65rem;
  position: absolute;
  left: 0.25rem;
  bottom: 0;
  display: none;
}
.errorTip .errorTipText {
  display: block;
}
.errorAgreeTipText {
  font-weight: 400;
  font-size: 0.4rem;
  line-height: 0.65rem;
  position: absolute;
  left: 0rem;
  top: -0.7rem;
  display: none;
}
.errorAgreeTip {
  animation: shake 0.5s;
}
.errorAgreeTip .errorAgreeTipText {
  display: block;
}

@-webkit-keyframes shake {
  0%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  50%,
  90% {
    -webkit-transform: translate3d(-2px, 0, 0);
    transform: translate3d(-2px, 0, 0);
  }
  60% {
    -webkit-transform: translate3d(2px, 0, 0);
    transform: translate3d(2px, 0, 0);
  }
}
.c-bd1-F1F1F5 {
  border: 1px solid #f1f1f5;
}
.c-fc-FF300B {
  color: #FF300B;
}
.tip-area {
  width: 4.75rem;
  height: 1.35rem;
  background: #FFF1E5;
  border-radius: 0.6rem 0.6rem 0.6rem 0;
  position: absolute;
  left: 0;
  top: -0.7rem;
}
.c-bd4-EEEEEE {
  border: 0.1rem solid #EEEEEE;
}
.current-user {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  height: 0.7rem;
  border-radius: 0.5rem 0.5rem 0 0.5rem;
  font-size: 0.45rem;
  position: absolute;
  top: -0.1rem;
  right: -0.1rem;
}
.conflict-user {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  height: 0.7rem;
  background: #FF5355;
  border-radius: 0.5rem 0.5rem 0 0.5rem;
  font-size: 0.45rem;
  position: absolute;
  top: -0.1rem;
  right: -0.1rem;
}
.check-user {
  width: 1rem;
  height: 1rem;
  /* background: #EEEEEE; */
  border-radius: 0.5rem 0 0.5rem 0;
  position: absolute;
  bottom: -0.1rem;
  right: -0.1rem;
}
.c-maxh58vh {
  max-height: 58vh;
}
</style>
